<template>
  <div class="all">
    <!-- {{PlatformMonitoringDataClone}} -->
    <div class="inner">
      <div class="innerin-0">
        <div class="list1">编号</div>
        <div class="list2">操作</div>
        <div class="list3">更新时间</div>
      </div>
    </div>
    <div class="inner" v-for="(item,index) in PlatformMonitoringDataClone" :key="item.id">
      <div class="innerin-1">
        <div class="list1">{{index+1}}</div>
        <div class="list2">{{item.opt}}</div>
        <div class="list3">{{item.createDate}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      PlatformMonitoringDataClone: []
    };
  },
  props: ["PlatformMonitorData"],
  watch: {
    PlatformMonitorData: {
      handler(newVal, oldVal) {
        this.PlatformMonitoringDataClone=JSON.parse(JSON.stringify(newVal))
      },
      deep: true,
      //immediate: true,//深度监听数组
    }
  },
  created() {
    this.PlatformMonitoringDataClone=JSON.parse(JSON.stringify(this.PlatformMonitorData))
  },
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 0 25px 0;
  .inner {
    height: 35px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    .innerin-0,.innerin-1{
      width: 100%;
      height: 100%;
      display: flex;
      .list1 {
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
      }
      .list2 {
        flex: 3;
        display: flex;
        align-items: center;
        padding: 5px;
         justify-content: center;
      }
      .list3 {
        flex: 4;
        display: flex;
        align-items: center;
        padding: 5px;
         justify-content: center;
      }
      .state {
        color: #d7200e;
      }
    }
     .innerin-0{
       color: #269AE1;
     }
     .innerin-1{
       color: #434343;
     }
  }
}
</style>